<template>
  <div class="app-container home">
    <el-row :gutter="20">
      <el-col :sm="24" :lg="12" align="center">
        <el-card class="update-log">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="待办任务" name="first">
              <el-table :data="todoList" style="width: 100%">
                <el-table-column label="标题" width="180">
                  <template slot-scope="scope">
                    <el-link type="primary"
                      :href="'/reviewFrame/frame?taskId=' + scope.row.taskId + '&instanceId=' + scope.row.instanceId + '&src=' + encodeURIComponent(scope.row.url)"
                      target="_blank">{{ scope.row.title }}</el-link>
                  </template>
                </el-table-column>
                <el-table-column prop="type" label="任务类型" width="180">
                </el-table-column>
                <el-table-column prop="taskCreateTime" label="任务创建时间">
                </el-table-column>
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                  <template slot-scope="scope">
                    <apply-after v-show="scope.row.instanceId" :row="scope.row" :taskId="scope.row.taskId"
                      :type="scope.row.type" @getList="getList"></apply-after>
                  </template>
                </el-table-column>
              </el-table>
              <pagination class='page' v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize" @pagination="getList" />
            </el-tab-pane>
            <el-tab-pane label="已办任务" name="second">
              <el-table :data="todoList" style="width: 100%">
                <el-table-column label="标题" width="180">
                  <template slot-scope="scope">
                    <el-link type="primary"
                      :href="'/reviewFrame/frame?taskId=' + scope.row.taskId + '&instanceId=' + scope.row.instanceId + '&src=' + encodeURIComponent(scope.row.url)"
                      target="_blank">{{ scope.row.title }}</el-link>
                  </template>
                </el-table-column>
                <el-table-column prop="type" label="任务类型" width="180">
                </el-table-column>
                <el-table-column prop="taskCreateTime" label="任务创建时间">
                </el-table-column>
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                  <template slot-scope="scope">
                    <apply-after v-show="scope.row.instanceId" :row="scope.row" :taskId="scope.row.taskId"
                      :type="scope.row.type" @getList="getList"></apply-after>
                  </template>
                </el-table-column>
              </el-table>
              <pagination class='page' v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize" @pagination="getDoneList" />
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
      <!-- <el-col :sm="24" :lg="12">
        <h4 class="text-danger" style="font-size: 14px">
          Test Case:<br /><br />
          一、示例Demo<br />
          申请人：任意用户<br />
          机电科电管员：axianlu / 123456<br />
          供电管理口领导：rensm / 12345<br />
          调度会会签：根据提交前所选用户<br /><br />

          二、请假业务<br />
          普通员工：chengxy / 123456<br />
          部门领导：axianlu / 123456<br />
          人事：rensm / 12345<br /><br />

          注：除了 admin 和 ry 外，所有用户密码均为 123456（详见用户管理）
        </h4>
      </el-col> -->
    </el-row>
    <el-divider />
    <el-row :gutter="20">
      <el-col :sm="24" :lg="12">
        <el-card class="update-log">
        <notice></notice>
      </el-card>
      </el-col>
    </el-row>
    <!-- <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="12" :lg="8">
        <el-card class="update-log">
          <div slot="header" class="clearfix">
            <span>联系信息</span>
          </div>
          <div class="body">
            <p>
              <i class="el-icon-user-solid"></i> QQ群：603909590
            </p>
            <p>
              <i class="el-icon-chat-dot-round"></i> 微信：<a href="javascript:;">huangluqian12345</a>
            </p>
            <p>
              <i class="el-icon-user-solid"></i> QQ：<a href="javascript:;">1055202292</a>
            </p>
            <img src="~@/assets/image/qqgroup.jpg" alt="qqgroup" width="100%" />
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="8">
        <el-card class="update-log">
          <div slot="header" class="clearfix">
            <span>更新日志</span>
          </div>
          <el-collapse accordion>
            <el-collapse-item title="v1.0.0 - 2020-12-16">
              <ol>
                <li>闲鹿工作流分离版正式发布</li>
              </ol>
            </el-collapse-item>
          </el-collapse>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="8">
        <el-card class="update-log">
          <div slot="header" class="clearfix">
            <span>捐赠支持</span>
          </div>
          <div class="body">
            <img src="~@/assets/image/pay.png" alt="donate" width="100%" />
            <span style="display: inline-block; height: 30px; line-height: 30px">你可以请作者喝杯咖啡表示鼓励</span>
          </div>
        </el-card>
      </el-col>
    </el-row> -->
  </div>
</template>

<script>
import { todoTaskList, doneTaskList } from '@/api/activiti/customprocess'
import ApplyAfter from "@/components/Activiti/ApplyAfter/indexX6"
import Notice from "@/views/system/notice/indexView"
export default {
  name: "index",
  components: {
    Notice,
    ApplyAfter
  },
  data() {
    return {
      todoList: [],
      doneList: [],
      activeName: 'first',
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      total: 0,
      // 版本号
      version: "3.2.1",
    };
  },
  mounted() {
    this.getList()
  },
  methods: {
    getUrl(url) {
      // return /reviewFrame/frame?src=encodeURIComponent(url)
    },
    handleClick() {
      this.queryParams.pageNum = 1
      if (this.activeName == 'first') {
        this.getList()
      } else if (this.activeName == 'second') {
        this.getDoneList()
      }
    },
    async getList() {
      let response = await todoTaskList(this.queryParams);
      this.todoList = response.rows
      this.total = response.total
    },
    async getDoneList() {
      let response = await doneTaskList(this.queryParams);
      this.todoList = response.rows
      this.total = response.total
    },
    goTarget(href) {
      window.open(href, "_blank");
    },
  },
};
</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }

  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }

  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans",
  "Helvetica Neue",
  Helvetica,
  Arial,
  sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .page {
    height: 30px;
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
      padding-bottom: 40px;
    }
  }
}
</style>

